<script setup lang='ts'>
import type { OptionsType, PlusColumn } from 'plus-pro-components'
import type { VxeGridProps } from 'vxe-table'

import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: '/pages/counselor/counselor-management',
})

const router = useRouter()

const initialState = {
    counselorName: '',
    houseName: '',
}
const state = ref(cloneDeep(initialState))

const searchConditions = ref(cloneDeep(initialState))
const tablePage = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const _getCounselorPageParams = computed(() => ({
    ...searchConditions.value,
    page: tablePage.currentPage,
    size: tablePage.pageSize,
}))

// #region Form
const isFormLoading = computed(() => false)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 6,
        },
        label: '置业顾问名称',
        prop: 'counselorName',
        valueType: 'copy',
    },
    {
        colProps: {
            span: 6,
        },
        label: '楼盘名称',
        prop: 'houseName',
        valueType: 'copy',
    },
]

function submit() {
    searchConditions.value = cloneDeep(state.value)
    resetTablePage()
}

function reset() {
    state.value = cloneDeep(initialState)
    searchConditions.value = cloneDeep(initialState)
    resetTablePage()
}

function resetTablePage() {
    tablePage.currentPage = 1
    tablePage.pageSize = 10
}
// #endregion

// #region Table
const isTableLoading = computed(() => false)
const tableData = ref<any[]>([{
    counselAmount: 111,
    counselorName: '张三-16666666666',
    currentDayReplyAmount: 14,
    currentDayReplyRate: '89%',
    fiveMinutesReplyAmount: 2,
    fiveMinutesReplyRate: '5%',
    id: 1,
    oneMinuteReplyAmount: 60,
    oneMinuteReplyRate: '80%',
    relativeHouse: '武汉城建·汉江云宸',
    threeMinutesReplyAmount: 49,
    threeMinutesReplyRate: '15%',
    waitingTime: '37s',
}])

const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'id', title: 'ID' },
        { field: 'personalInfo', slots: { default: 'personal_info' }, title: '个人信息' },
        { field: 'relativeHouse', title: '关联楼盘' },
        { field: 'counselAmount', title: '咨询总量' },
        { field: 'oneMinuteReplyAmount', title: '1分钟回复量' },
        { field: 'threeMinutesReplyAmount', title: '3分钟回复量' },
        { field: 'fiveMinutesReplyAmount', title: '5分钟回复量' },
        { field: 'currentDayReplyAmount', title: '当日回复量' },
        { field: 'oneMinuteReplyRate', title: '1分钟回复率' },
        { field: 'threeMinutesReplyRate', title: '3分钟回复率' },
        { field: 'fiveMinutesReplyRate', title: '5分钟回复率' },
        { field: 'currentDayReplyRate', title: '当日回复率' },
        { field: 'waitingTime', title: '客户平均等待时长' },
    ],
    rowStyle: {
        height: '100px',
    },
})
// #endregion

// #region UI Listener
function onPersonalInfoClick(row: any) {
    router.push(
        {
            path: '/trade-center/counselor/counselor-detail',
            query: {
                id: row.id,
            },
        },
    )
}
// #endregion

// watchEffect(() => {
//     tableData.value = cloneDeep(productPageData.value)
//     tablePage.total = productTotal.value
// })
// #endregion
</script>

<template>
    <el-card mb-20
             shadow="never"
    >
        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <SearchForm v-else
                    v-model="state"
                    :columns="columns"
                    submit-text="查询"
                    :row-props="{ gutter: 40 }"
                    @submit="submit"
                    @reset="reset"
        />
    </el-card>

    <el-card shadow="never">
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isTableLoading"
                     :data="tableData"
        >
            <template #personal_info="{ row }">
                <label class="text-#409EFF cursor-pointer"
                       @click="onPersonalInfoClick(row)"
                >
                    <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.p9N4LqKEfaJ2AewVtiYTiAAAAA?rs=1&pid=ImgDetMain"
                         alt=""
                         width="40"
                         height="40"
                         class="m-auto"
                    >

                    <div class="truncate">
                        {{ row.counselorName }}
                    </div>
                </label>
            </template>
        </SearchTable>
    </el-card>
</template>

<style lang="scss" scoped>
:deep(.vxe-cell) {
    max-height: 80px !important;
}
</style>
